<template>
   <div class="body">
    <div class="dowebok" id="dowebok">
   <div class="form-container sign-up-container">
       <el-form  class="demo-ruleForm">
           <h1>注册</h1>
           <span>请使用邮箱注册</span>
           <input type="text" placeholder="昵称" id="sname" v-model="signUpdata.name">
           <input type="email" placeholder="电子邮箱" id="semail" v-model="signUpdata.email">
           <input type="password" placeholder="密码" id = "spassword" v-model="signUpdata.password">
           <input type="password" placeholder="确认密码" id = "spasswords" v-model="signUpdata.Ipassword">
           <button id="sigunps"  @click="signUp">注册</button>
           <!-- <button id="sigunps"  @click="dialogVisible = true">注册</button> -->
       </el-form>
   </div>


   <div class="form-container sign-in-container">
       <form action="#" ::rules="rules" ref="ruleForm">
           <h1>登录</h1>
           <div class="social-container">
           </div>
           <span>请使用您的邮箱或者账号登录</span>
           <input type="email" placeholder="电子邮箱" id="email"  v-model="logindata.email" >
           <input type="password" placeholder="密码"  id ="password"  v-model="logindata.password" >
           <a href="#">忘记密码？</a>
           <button  id="login" @click="login">登录</button>
 </ul>
       </form>
   </div> 
  

<el-dialog
 title="邮箱验证"
 :visible.sync="dialogVisible"
 width="35%"
 :before-close="handleClose">
 <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
   <el-form-item label="邮箱" style="width:80%;" >
     <el-input v-model="formLabelAlign.email" :disabled="true"></el-input>
   </el-form-item>
   <el-form-item label="验证码" style="width:80%;">
     <el-input v-model="formLabelAlign.code"  style="width:50%;"></el-input>
     <el-button style="margin-left: 10px;"  @click="countDown">{{contentTime.content}}</el-button>
   </el-form-item>
 </el-form>
 <span slot="footer" class="dialog-footer">
   <el-button @click="dialogVisible = false">取 消</el-button>
   <el-button type="primary" @click="verification">确 定</el-button>
 </span>
</el-dialog>


   <div class="overlay-container">
       <div class="overlay">
           <div class="overlay-panel overlay-left">
               <h1>已有帐号？</h1>
               <p>请使用您的帐号进行登录</p>
               <button class="ghost" id="signIn">登录</button>
           </div>
           <div class="overlay-panel overlay-right">
               <h1>没有帐号？</h1>
               <p>立即注册加入我们，和我们一起开始旅程吧</p>
               <button class="ghost" id="signUp">注册</button>
           </div>
       </div>
   </div>
</div>
   </div>
</div>
</template>



<script>

window.onload=function(){

var signUpButton = document.getElementById('signUp')
var signInButton = document.getElementById('signIn')
var container = document.getElementById('dowebok')


signUpButton.addEventListener('click', function () {
   container.classList.add('right-panel-active')
})


signInButton.addEventListener('click', function () {
   container.classList.remove('right-panel-active')
})


}


export default {
   data() {
     return {
       dialogTableVisible: false,
       dialogVisible: false,
       tal:1,
       contentTime:{
       content: '发送验证码', 
       totalTime: 60,
       },
       logindata:{
           email:'',
           password:''
       },
       formLabelAlign:{
        email:'',
        code:''
       },
       signUpdata:{
           name:'',
           email:'',
           password:'',
           Ipassword:'',
           sex:'',
           dsc:'',
           statuscode:1,
           age:''
       },
       rules:{
           name: [
           { required: true, message: '请输入活动名称', trigger: 'blur' },
           { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
         ],
       },

       
     }
   },

   methods: {
   dialogVisible()
   {
       
   },
   labelPosition(){

       },
   handleClose(){

       },
     open1() {
       this.$message('这是一条消息提示');
     },
     open2(mag) {
       this.$message({
         message: mag,
         type: 'success'
       });
     },

     open3(msg) {
       this.$message({
         message: msg,
         type: 'warning'
       });
     },

     open4(msg) {
       this.$message.error(msg);
     },

   //登录请求
     async login(){
       if(this.logindata.name == '' ||  this.logindata.email == '')
       {
           this.open3("账号或者密码不能为空!")
           return;
       }
       
       const {data:res} = await this.$http.post('user/loginPage',this.$qs.stringify(this.logindata)); 
       if(res.success==true){

           this.open2("恭喜您,登录成功!")
           localStorage.setItem('email',JSON.stringify(this.logindata.email))  
           this.$router.push('/HomePage')
           
       }else
       {
           this.open4(res.message);
       }
   },
 
    //注册验证请求
    async signUp(){

   if(this.signUpdata.name == '' ||  this.signUpdata.email == '' ||  this.signUpdata.password == ''|| this.signUpdata.Ipassword == '')
   {
       this.open3("信息请填写完整!")
       return;
   }

   if(this.signUpdata.password != this.signUpdata.Ipassword)
   {
       this.open3("两次密码输入不一致!")
       return;
   }
   const {data:res} = await this.$http.post('user/findEmailAndName',this.$qs.stringify(this.signUpdata)); 
   if(res.success==true){
   this.formLabelAlign.email = this.signUpdata.email;
   this.dialogVisible = true;
   }else
       {
       this.open4(res.message);

       }
   },

   //注册请求
       async signUps(){

       if(this.signUpdata.name == '' ||  this.signUpdata.email == '' ||  this.signUpdata.password == ''|| this.signUpdata.Ipassword == '')
       {
           this.open3("信息请填写完整!")
           return;
       }

       if(this.signUpdata.password != this.signUpdata.Ipassword)
       {
           this.open3("两次密码输入不一致!")
           return;
       }
       const {data:res} = await this.$http.post('user/sigunpPage',this.$qs.stringify(this.signUpdata)); 
       if(res.success==true){
           this.open2("注册成功,请直接登录!");
       }else
           {
           this.open4(res.message);

           }
       },


   //验证码发送
   async sendCode()
   {
       if(this.formLabelAlign.email == '')
       {
           this.open3("邮箱不能为空!")
           return;
       }
       const {data:res} = await this.$http.post('Redis/getCode',this.$qs.stringify(this.formLabelAlign));
       if(res.success==true){
           this.open2(res.message);
      }else
       {
       this.open4(res.message);
       }
   },

   //点击发送验证码
   countDown() {

   var i=20
   if(this.tal==1)
   {
     this.sendCode();
     let clock = window.setInterval(() => {
     i--;
     this.contentTime.content = i + 's后重新发送'
     this.tal = 0;
     if (i <= 0) { 
     window.clearInterval(clock)
     this.contentTime.content = '重新发送验证码'
     this.tal = 1
     i = 20;
   }
   },1000)
   }
 },

   //验证请求
   async verification(){

       if(this.formLabelAlign.code=='')
       {
           this.open3("验证码不能为空!")
           return;
       }
       const {data:res} = await this.$http.post('Redis/verification',this.$qs.stringify(this.formLabelAlign));
       if(res.success==true){
       this.signUps();
       this.dialogVisible = false;

      }else
       {
       this.open4(res.message);
       }
   },

   
}
}
</script>
<style scoped>
* {
   box-sizing: border-box;
}

.body {
   font-family: 'Montserrat', sans-serif;
   background: linear-gradient(to right, rgb(224, 234, 252), rgb(207, 222, 243));
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: -20px 0 50px;
}

h1 {
   font-weight: bold;
   margin: 0;
}

p {
   font-size: 14px;
   line-height: 20px;
   letter-spacing: .5px;
   margin: 20px 0 30px;
}

span {
   font-size: 12px;
}

a {
   color: #333;
   font-size: 14px;
   text-decoration: none;
   margin: 15px 0;
}

.dowebok {
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
   position: relative;
   overflow: hidden;
   width: 768px;
   max-width: 100%;
   min-height: 480px;
}

.form-container form {
   background: #fff;
   display: flex;
   flex-direction: column;
   padding:  0 50px;
   height: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.social-container {
   margin: 20px 0;
}

.social-container a {
   border: 1px solid #ddd;
   border-radius: 50%;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   margin: 0 5px;
   height: 40px;
   width: 40px;
}

.social-container a:hover {
   background-color: #eee;
}

.form-container input {
   background: #eee;
   border: none;
   padding: 12px 15px;
   margin: 8px 0;
   width: 100%;
   outline: none;
}

button {
   border-radius: 20px;
   border: 1px solid #47f330;
   background: #20eb3b;
   color: #fff;
   font-size: 12px;
   font-weight: bold;
   padding: 12px 45px;
   letter-spacing: 1px;
   text-transform: uppercase;
   transition: transform 80ms ease-in;
   cursor: pointer;
}

button:active {
   transform: scale(.95);
}

button:focus {
   outline: none;
}

button.ghost {
   background: transparent;
   border-color: #fff;
}

.form-container {
   position: absolute;
   top: 0;
   height: 100%;
   transition: all .6s ease-in-out;
}

.sign-in-container {
   left: 0;
   width: 50%;
   z-index: 2;
}

.sign-up-container {
   left: 0;
   width: 50%;
   z-index: 1;
   opacity: 0;
}

.overlay-container {
   position: absolute;
   top: 0;
   left: 50%;
   width: 50%;
   height: 100%;
   overflow: hidden;
   transition: transform .6s ease-in-out;
   z-index: 100;
}

.overlay {
   background: #43f560;
   background: linear-gradient(to right, #3ff84e, #6cdb6c) no-repeat 0 0 / cover;
   color: #fff;
   position: relative;
   left: -100%;
   height: 100%;
   width: 200%;
   transform: translateY(0);
   transition: transform .6s ease-in-out;
}

.overlay-panel {
   position: absolute;
   top: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0 40px;
   height: 100%;
   width: 50%;
   text-align: center;
   transform: translateY(0);
   transition: transform .6s ease-in-out;
}

.overlay-right {
   right: 0;
   transform: translateY(0);
}

.overlay-left {
   transform: translateY(-20%);
}

/* Move signin to right */
.dowebok.right-panel-active .sign-in-container {
   transform: translateY(100%);
}

/* Move overlay to left */
.dowebok.right-panel-active .overlay-container {
   transform: translateX(-100%);
}

/* Bring signup over signin */
.dowebok.right-panel-active .sign-up-container {
   transform: translateX(100%);
   opacity: 1;
   z-index: 5;
}

/* Move overlay back to right */
.dowebok.right-panel-active .overlay {
   transform: translateX(50%);
}

/* Bring back the text to center */
.dowebok.right-panel-active .overlay-left {
   transform: translateY(0);
}

/* Same effect for right */
.dowebok.right-panel-active .overlay-right {
   transform: translateY(20%);
}



</style>
